<template>
  <div class="m_con">
    <div class="mc_title"><h2>moment.js插件使用</h2></div>
    <div class="mc_item" v-text="'基础使用：' + t1"></div>
    <div class="mc_btn">
      <a-button @click="saveInfo">save</a-button>
      <a-button @click="getInfo" style="margin-left: 10px">get</a-button>
      <a-button @click="judge" style="margin-left: 10px">judge</a-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import moment from "moment";
import { ref, reactive } from "vue";
import storeSelf from "@/stores/storeSelf";

const t1 = ref(moment().format("YYYY-MM-DD kk:mm:SS"));

const demoInfo = {
  name: "jack",
  age: 14,
};

const saveInfo = () => {
  storeSelf.storeInfoWithTimeAndFlag("INFO", demoInfo, "2023-05-11");
};

const getInfo = () => {
  const info = storeSelf.getStoreInfoWithKey("INFO");
  console.log(info);
};

const judge = () => {
  const defaultT = "2023-05-11";
  const nowT = moment().format("YYYY-MM-DD");
  console.log(moment(defaultT).isSameOrAfter(nowT));
};
</script>

<style scoped lang="scss">
.m_con {
  padding: 40px;
  .mc_title {
    width: 100%;
    margin-bottom: 20px;
  }
  .mc_btn {
    margin-top: 20px;
  }
}
</style>
